<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
    <title>Background -P89</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            /* 可以同时设置背景颜色和背景图片 */
            /*background-color: orange;*/
            /*background-image: url(../images/bg/blue.png);*/
            /* 背景图片的重复方式 
                repeat:重复,默认值
                repeat-x:只沿x方向重复 -y:y方向
                no-repeat:不重复
            */
            /*background-repeat: no-repeat;*/
            /* 图片位置:九宫格位置 */
            /* 
                background-position: top right; 
                background-position: center center; 
            /* 偏移量 */
            /*background-position: 10px 10px;*/
            /* 背景的范围 */
            /* 
                border-box:背景会出现在边框的下边
                padding-box:背景不会出现在边框,只会在内容区和内边距
                content-box:背景只会出现在内容区,边框和内边距不会出现
            */
            /*background-clip: border-box;*/
            /* 
                背景图片偏移量计算的原点
                padding-box 背景图片的原点在内边距,同上
            */
            /*background-origin: padding-box;*/
        }
        
        .box1 {
            /*渐变*/
            /*background-image: linear-gradient(to right, red,yellow);!*线性渐变*!*/
            /*background-image: linear-gradient(45deg, red,yellow);!*线性渐变*!*/
            /*background-image: linear-gradient(.25turn, red,yellow);!*线性渐变*!*/
            /*background-image: linear-gradient(red 150px,yellow 300px,orange 450px);!*线性渐变*!*/
            /*background-image: repeating-linear-gradient(red 10px,yellow 20px,green 30px);!*线性渐变*!*/
            /*background-image: radial-gradient(red 100px,yellow 200px,green 300px);!*线性渐变*!*/
            /*background-image: radial-gradient(red ,yellow);!*线性渐变*!*/
            background-image: radial-gradient(100px 100px at 0 0, red, #bfa);
            /*线性渐变*/
        }
        
        .box3 {
            width: 100px;
            height: 100px;
            background-image: url(../images/bg/yellow.png);
        }
        
        .box3:hover {
            background-image: url(../images/bg/beige.png);
        }
        
        .box3:active {
            background-image: url(../images/bg/red.png);
        }
    </style>
</head>

<body>
    <div class="box1">
        <!--        <div class="box3"></div>-->
    </div>
</body>

</html>